<script>
import {ref} from "vue";
import avatar from "/src/assets/avatar.jpg"
import like from "/src/assets/like.svg"
import passageDialog from "./passageDialog.vue";
import adoptPassageDialog from "./adoptPassageDialog.vue";
import axios from 'axios';
export default {
  components:{passageDialog,adoptPassageDialog},
  props: {
    passage: {
      type: Object,
      required: true,
    },
    token:{
      type:String,
      required: true
    },
    deleteAble:{
      type:Boolean,
      required:true
    }
  },
  mounted(){
    axios.defaults.headers.common['Authorization'] = `${this.$props.token}`;
    if(this.$props.passage.PassageType === '1'){
      this.isAdopt = true;
    }
    else{
      this.isAdopt = false;
    }
    this.isLiked = this.$props.passage.IfLiked;

  },
  data(){
        return {
            avatar,like,
            isWarningVisible:ref(false),
            adoptDialogVisible:ref(false),
            dialogVisible:ref(false),
            isAdopt:ref(true),
            isLiked:ref(false),
            likeNum:ref(0)
        }
    },
    methods:{
      likeHandle(isChecked){
        this.isLiked = isChecked
      },
      async likeClicked() {
        this.isLiked = !this.isLiked
        if (this.isLiked === true) {
          try {
            const response = await axios.post('http://localhost:8080/likes/passage/add', {
              PassageID: this.$props.passage.PassageID
            });
            console.log("点赞成功", response);
          } catch (error) {
            console.error("点赞失败", error);
          }
        }
        else
        {
          try {
            const response = await axios.post('http://localhost:8080/likes/passage/undo', {
              PassageID: this.$props.passage.PassageID
            });
            console.log("取消成功", response);
          } catch (error) {
            console.error("取消失败", error);
          }
        }

        try {
          const response = await axios.get('http://localhost:8080/passage/content/' + this.$props.passage.PassageID);
          this.likeNum = response.data.LikeNum;
          console.log("点赞数", this.likeNum);
          sessionStorage.setItem('likeNum', this.likeNum);
        } catch (error) {
          console.error("获取点赞数失败", error);
        }
      }
      ,
        deleteWarning()
        {
          this.isWarningVisible = true;
        }
      ,
        delBtn()
        {
          const response = axios.post('http://localhost:8080/passageMana/delete', {
            "PassageID": this.$props.passage.PassageID
          });
          console.log(response)
          this.isWarningVisible = false;
          this.$emit('update')
        }
      ,
        cancelBtn()
        {
          this.isWarningVisible = false;
          this.$emit('update')
        }
      ,
        cardClick()
        {
          const response = axios.get('http://localhost:8080/passage/content/'+ this.$props.passage.PassageID ,{});
          response.then((result) => {
            this.likeNum = result.data.LikeNum;
            console.log(result.data.LikeNum)
            console.log("点赞数",this.likeNum)
            sessionStorage.setItem('likeNum', this.likeNum);
          })
          if (this.isAdopt) {
            this.adoptDialogVisible = true;
            const PassageID = {PassageID: this.$props.passage.PassageID};
            sessionStorage.setItem('AdoptPassageID', JSON.stringify(PassageID));
          } else {
            this.dialogVisible = true;
            const PassageID = {PassageID: this.$props.passage.PassageID};
            sessionStorage.setItem('PassageID', JSON.stringify(PassageID));
          }

        }
      ,
      }
}
</script>

<template>
  <el-card style="width:31%;font-size:14px;" >
      <el-col>
          <img
                  :src="passage.PassagePic"
                  alt=""
                  style="width:100%;height:300px;cursor: pointer;object-fit: contain"
                  @click="cardClick"

          /><br/>
          <el-row justify="space-between" style="margin-top: 3px;">
      <span
              style="display: block;width:auto;word-wrap: break-word;margin-bottom: 10px;font-size:18px;">
          {{passage.PassageTitle}}
          <span v-if="isAdopt" class="rounded-box">
            领养贴
          </span>
      </span>

          </el-row>

          <div style="display: flex;justify-content: space-between;align-items: center;">
            <div style="display: flex; align-items: center;">
              <!--头像-->
              <el-avatar :class="'avatar'"
                         :src="passage.ProfilePhoto"
                         :fit="'cover'"
                         :shape="'circle'"
                         :size="35"
                         style="margin-right:8px;cursor: default;"
              />
              <!--名称-->
              <span style="font-size:13px;margin:0 5px 0 0;width:95px;">
                  {{ passage.UName }}
                </span>

              <!--location icon-->
              <el-icon
                  color="#FFD466"
                  :size="25"
                  style="margin:0 1px 0 0;"
              >
                <Location />
              </el-icon>

              <!--省份-->
              <span style="font-size:13px;width:39px;">{{ passage.PassageArea }}</span>
            </div>



              <div style="display: flex;margin-top:3px;">
                  <!--删除按钮-->
                  <div v-if="this.$props.deleteAble" style="margin-right:4px;margin-top: 1px;" >
                      <button class="deleteBtn" @click="deleteWarning">
                          <svg viewBox="0 0 15 17.5" height="18" width="18" xmlns="http://www.w3.org/2000/svg" class="icon">
                              <path transform="translate(-2.5 -1.25)" d="M15,18.75H5A1.251,1.251,0,0,1,3.75,17.5V5H2.5V3.75h15V5H16.25V17.5A1.251,1.251,0,0,1,15,18.75ZM5,5V17.5H15V5Zm7.5,10H11.25V7.5H12.5V15ZM8.75,15H7.5V7.5H8.75V15ZM12.5,2.5h-5V1.25h5V2.5Z" id="Fill" ></path>
                          </svg>
                      </button>
                  </div>

                  <!--点赞按钮-->
                  <div>
                      <label class="container">
                          <input type="checkbox" v-model="isLiked" @click="likeClicked">
                          <div class="checkmark">
                              <svg viewBox="0 0 256 256">
                                  <rect fill="none" height="256" width="256"></rect>
                                  <path class="like" d="M224.6,51.9a59.5,59.5,0,0,0-43-19.9,60.5,60.5,0,0,0-44,17.6L128,59.1l-7.5-7.4C97.2,28.3,59.2,26.3,35.9,47.4a59.9,59.9,0,0,0-2.3,87l83.1,83.1a15.9,15.9,0,0,0,22.6,0l81-81C243.7,113.2,245.6,75.2,224.6,51.9Z"
                                        stroke-width="18px" stroke="#000000" fill="none"></path></svg>
                          </div>
                      </label>
                  </div>
              </div>
          </div>

      </el-col>
  </el-card>
  <el-dialog v-model="adoptDialogVisible">
      <adoptPassageDialog @close = "adoptDialogVisible = false" @likeEvent="likeHandle" :key="this.isLiked"/>
  </el-dialog>
  <el-dialog v-model="dialogVisible">
      <passageDialog @close = "dialogVisible = false" @likeEvent="likeHandle" :key="this.isLiked"/>
  </el-dialog>
  <el-dialog v-model="isWarningVisible" :width="350" center style="margin-top:35vh;padding:25px;">
    <div style="display: flex;flex-direction: row;gap: 15px;justify-content: center;margin-top: 10px;">
      <el-icon
          color="#FFD466"
          :size="55"
      >
        <warning-filled />
      </el-icon>
      <div style="display: flex;flex-direction: column;">
        <span style="font-size: 25px;font-weight: bold">确认删除该帖吗？</span>
        <span style="font-size: 15px;">（一经删除，无法找回）</span>
      </div>
    </div>
    <div style="display: flex;flex-direction: row;justify-content: center;margin-top: 25px;gap:15px;">
      <el-button @click="delBtn" color="#FFD466" style="color:white;width:80px;">确认</el-button>
      <el-button @click="cancelBtn" color="#A6A6A6" style="width:80px;">取消</el-button>

    </div>
  </el-dialog>



</template>

<style scoped>

.el-avatar{
    cursor: pointer;
}
/*领养贴*/
.rounded-box {
    position:absolute;
    right:1px;
    border: 2px solid #FFD466; /* 边框颜色 */
    border-radius: 5px; /* 圆角弧度 */
    padding: 2px; /* 内边距 */
    width: 20%; /* 宽度 */
    height:18px;
    text-align: center; /* 文字居中 */
    background-color: #FFD466; /* 背景颜色 */
    font-size: 12px; /* 字体大小 */
    font-weight: bold;
    color:white;
    margin-top: 1px;
}
/*deleteBtn动效*/
.deleteBtn {
    background-color: transparent;
    position: relative;
    border: none;
}

.deleteBtn::after {
    position: absolute;
    transform: translateX(-50%);
    width: fit-content;
    height: fit-content;
    background-color: rgb(168, 7, 7);
    padding: 4px 8px;
    border-radius: 5px;
    transition: .2s linear;
    transition-delay: .2s;
    color: white;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
}

.icon {
    transform: scale(1.2);
    transition: .2s linear;
}

.deleteBtn:hover > .icon {
    transform: scale(1.5);
    cursor:pointer;
}

.deleteBtn:hover > .icon path {
    fill: rgb(168, 7, 7);
}

.deleteBtn:hover::after {
    visibility: visible;
    opacity: 1;
    top: -160%;
}


/*like动效*/
/* From Uiverse.io by KSAplay */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
    transition: 100ms;
}

.checkmark {
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    transition: 100ms;
    animation: dislike_effect 500ms ease;
}

.container input:checked ~ .checkmark path {
    fill: #FFD466;
    stroke-width: 0;
}

.container input:checked ~ .checkmark {
    animation: like_effect 400ms ease;
}

.container:hover {
    transform: scale(1.2);
}
.container:hover .like{
    stroke:#FFD466;
}

@keyframes like_effect {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes dislike_effect {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}
</style>
